<template>

    <div class="projectHead">
        <div><span>项目文件</span></div>
    </div>


    <div class="projectFileUp">
        <!-- <span>文件名称</span> -->
        <el-input placeholder="请输入关键字查询" size="small" style="width:250px" v-model="Keyword" clearable @keyup.enter="search"/>
        <el-button circle size="mini" id="searchBtn" @click="search">
            <search></search>
        </el-button>
        <el-upload>
            <el-button type="primary" id="uploadBtn" size="mini" >
                <el-icon><upload-filled></upload-filled></el-icon>
                <span style="font-size:14px">上传文件</span>
            </el-button>
        </el-upload>
    </div>
    <div class="projectFileDown">
        <el-table :data="fileData" style="width:100%;" :header-cell-style="{background:'#FAFAFA',height:'60px',color:'black'}">
            <el-table-column width="80px"/>
            <el-table-column prop="filename" label="文件名称" width="500px"/>
            <el-table-column width="379px"/>
            <el-table-column prop="size" label="文件大小" width="200px"/>
            <!-- <el-table-column width="100px"/> -->
            <el-table-column prop="uploadTime" label="上传时间" width="300px"/>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-popconfirm title="是否删除文件?" @confirm="deleteFile(scope.row.filename)" confirmButtonText="确认" cancelButtonText="取消">
                        <template #reference>
                            <el-button type="text" size="small" style="color:orangered">删除</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button type="text" size="small" @click="downloadFile">下载</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="3" :page-size="10" style="margin:25px 0px 0px 20px"></el-pagination>
    </div>


</template>

<script>
import { Search,UploadFilled } from '@element-plus/icons-vue'
export default {
    data(){
        return{
            Keyword:"",
            fileData: [{
                filename: "ahwfiwaohgahg",
                uploadTime: "2016-05-03",
                size: 123,
            },{
                filename: "awdawwateattt",
                uploadTime: "2016-05-03",
                size: 123,
            },{
                filename: "awdawg1231451",
                uploadTime: "2016-05-03",
                size: 123,
            },{
                filename: "awdawg1231451",
                uploadTime: "2016-05-03",
                size: 123,
            },{
                filename: "awdawg1231451",
                uploadTime: "2016-05-03",
                size: 123,
            },{
                filename: "awdawg1231451",
                uploadTime: "2016-05-03",
                size: 123,
            },{
                filename: "awdawg1231451",
                uploadTime: "2016-05-03",
                size: 123,
            },{
                filename: "awdawg1231451",
                uploadTime: "2016-05-03",
                size: 123,
            },{
                filename: "awdawg1231451",
                uploadTime: "2016-05-03",
                size: 123,
            },
            {
                filename: "awdawg1231451",
                uploadTime: "2016-05-03",
                size: 123,
            },
            ]
        }
    },
    components:{
        Search,UploadFilled
    },
    methods:{
        search(){

        },
        deleteFile(filename){
            console.log(filename);
        },
        downloadFile(){

        }
    }
}
</script>

<style>
.projectHead{
    height: 60px;
    border-bottom: 1px solid var(--el-border-color-lighter);
}
.projectHead div{
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
}
.projectFileUp{
    display: flex;
    flex-direction: row;
    padding: 15px 0px 20px 40px;
    align-items: center;
    height: 60px;
}
#searchBtn{
    margin-left: 10px;
}
#uploadBtn{
    margin-left: 20px;
    /* height: 40px; */
    color: white;
    font-weight: bold;
    font-size: 18px;
}
.projectFileDown{
    height: 650px;
}
</style>